<template>
  <div class="container">
      <div class="wrapper">
        <div class="box" style="height:30vh">
          <div class="title">参数输入</div>
          <el-form :model="form" label-width="auto" style="max-width: 600px">
              <el-form-item label="电池强制充电功率/W">
                <div class="form-item-container">
                  <div class="input-container">
                    <el-input 
                    type='text'
                    v-model="form.Charge_power"
                    @focus="onfocus('Charge_power')"
                    @change="handleChange"/>
                  </div>
                  <img src="@/assets/conpulsory-input.png" alt="Battery Charge Power Icon" style="width: 35px; height: 35px;" />
                </div>    
              </el-form-item>
              <el-form-item label="电池强制放电功率/W">
                  <div class="form-item-container">
                  <div class="input-container">
                    <el-input 
                    type="text"
                    v-model="form.Discharge_power"
                    @focus="onfocus('Discharge_power')"
                    @change="handleChange"/>
                  </div>
                  <img src="@/assets/conpulsory-output.png" alt="Battery Charge Power Icon" style="width: 35px; height: 35px;" />
                </div>
              </el-form-item>
          </el-form>
        </div>
        <div class="box" style="height: 60vh;">
          <div class="title">数据检测
            <div class="battery">
              <img src="../assets/storage.png" alt="">
              <div class="block" id="battery_block"></div>
              <div class="text"> {{ wsStore.data.storage_soc | 0}}</div>
            </div>
          </div>
          <div class="detectionWrapper">
              <div class="quan">
                <div class="detectionText">
                  <div class="detectionTitle">基站功率</div>
                  <div class="detectionValue">{{ wsStore.data.station_power }}W</div>
                </div>
                <div class="shui"></div>
              </div>
              <div class="quan">
                <div class="detectionText">
                  <div class="detectionTitle">逆变器功率</div>
                  <div class="detectionValue">{{ wsStore.data.inverter_active_power }}W</div>
                </div>
                <div class="shui"></div>
              </div>
              <div class="quan">
                <div class="detectionText">
                  <div class="detectionTitle">光伏板功率</div>
                  <div class="detectionValue">{{ wsStore.data.pv_active_power }}W</div>
                </div>
                <div class="shui"></div>
              </div>
              <div class="quan">
                <div class="detectionText">
                  <div class="detectionTitle">储能输出功率</div>
                  <div class="detectionValue">{{ wsStore.data.storage_active_power }}W</div>
                </div>
                <div class="shui"></div>
              </div>
          </div>
        </div>
      </div>
      <div class="wrapper">
          <div class="box" style="height: 45vh;">
              <div class="title">
                  光伏功率曲线
              </div>
              <div class="chart" id="pvchart"></div>
          </div>
          <div class="box" style="height: 45vh;">
              <div class="title">
                  逆变器功率曲线
              </div>
              <div class="chart" id="inverterchart"></div>
          </div>
      </div>
  </div>
  <el-dialog
    v-model="dialogVisible"
    width="500"
    title="确认修改数据吗"
    :before-close="()=>{}"
  >
    <div style="text-align: center;">
      将<div class="dataFont">{{ labelOptions[current.name] }}</div>从<div  class="dataFont">{{ current.value || 0}}</div>修改为<div  class="dataFont">{{ form[current.name] }}</div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelChange">取消</el-button>
        <el-button type="primary" @click="handleSubmit">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="js">
import { reactive, onMounted, ref ,watch} from 'vue';
import * as echarts from 'echarts';
import useWs from '@/service/websocket';
import { changeCharge ,getEchartData} from '@/service/api';
const labelOptions = {
  Charge_power:'电池强制充电功率',
  Discharge_power:'电池强制放电功率'
}
//websocket数据
const wsStore = useWs()
//对话框可视控制
const dialogVisible = ref(false)
//当前修改的属性，用于取消修改
const current = reactive({
  name:'',
  value:''
})
//Pv曲线图
const optionPv = {
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'time',
  },
  yAxis: {
    type: 'value',
    name: '检测值'
  },
  dataZoom: [
    {
      type: 'slider', // 滑动条型数据区域缩放组件
      start: 0, 
      end: 100 
    },
    {
      type: 'inside', // 内置型数据区域缩放组件
      start: 0, 
      end: 100 
    }
  ],
  series: [{
    name: '数据系列',
    type: 'line',
    data: [],
    smooth: true,
    lineStyle: {
      color: '#4e73df'
    }
  }]
};
//invert曲线图
const optionInvert = {
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'time',
    data: []
  },
  yAxis: {
    type: 'value',
    name: '检测值'
  },
  dataZoom: [
    {
      type: 'slider', // 滑动条型数据区域缩放组件
      start: 0, 
      end: 100 
    },
    {
      type: 'inside', // 内置型数据区域缩放组件
      start: 0, 
      end: 100 
    }
  ],
  series: [{
    type: 'line',
    data: [],
    smooth: true,
    lineStyle: {
      color: '#4e73df'
    }
  }]
};
//点击输入框时获取当前数据
const onfocus = (name) =>{
  current.name = name
  current.value = form[current.name]
}
//预修改
const handleChange =() =>{
  dialogVisible.value = true
}
//确认提交数据
const handleSubmit =() =>{
  dialogVisible.value =false
  if(current.name === 'Charge_power'){
    changeCharge({
      Charge_discharge:222,
      Charge_power:form.Charge_power,
      Discharge_power:form.Discharge_power,
    })
  }else if(current.name === 'Discharge_power'){
    changeCharge({
      Charge_discharge:238,
      Charge_power:form.Charge_power,
      Discharge_power:form.Discharge_power,
    })
  }else{
    alert('error')
  }
}
//取消修改数据
const cancelChange = () =>{
  dialogVisible.value = false
  form[current.name] = current.value
}
//加载电池图标
const initStorage = (value) =>{
  if(value>50){
    battery_block.style.backgroundColor = '#79F4A9'
  }else if(value>20){
    battery_block.style.backgroundColor = '#FBE026'
  }else{
    battery_block.style.backgroundColor = '#F86C42'
  }
  battery_block.style.width = (value/100)*69 + 'px'
}
//监听后端推送
watch(wsStore.storage_soc,(newVal,oldVal)=>{
  initStorage(newVal)
})
onMounted(() => {
  getEchartData({type:'pv'}).then((res)=>{
    optionPv.series[0].data = res.data.photovoltaic
    echarts.init(pvchart).setOption(optionPv)
  })
  getEchartData({type:'inverter'}).then((res)=>{
    optionInvert.series[0].data = res.data.inverter
    echarts.init(inverterchart).setOption(optionInvert);
  })
  initStorage(wsStore.data.storage_soc | 0)
});

const form = reactive({
  Charge_power: '220',
  Discharge_power:'220',
  actual:'',
  station:'323W',
  inverter:'842W',
  panel:'1270W',
  battery:'250W'
})

</script>
<style scoped>
.container {
  display: flex;
  flex-direction: row;
  background-color: #f5f5f5; /* 可选背景色 */
  height: 100vh; /* 占满视口高度 */
}
.wrapper{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 50%;
  height: 100%;
}
.box {
  background-color: #fff;
  border-radius: 12px; /* 圆角半径 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  padding: 20px;
  text-align: left;
  width: 45vw;
}
.title{
  font-size: larger;
  font-weight: bolder;
  height:40px;
  position: relative;
}
.battery{
  position: relative;
  width:100px;
  height:100px;
  top:-20px;
  left:70%;
  transform: translateY(-50%);
  text-align: center;
  color: black;
}
img{
  width:100%
}
.text{
  position: absolute;
  text-align: center;
  width:69px;
  height:25px;
  top:calc(50% - 1px);
  left:12px;
  transform: translateY(-50%);
}
.block{
  position: absolute;
  /* 69 */
  width:69px;
  height:25px;
  top:calc(50% - 1px);
  left:12px;
  transform: translateY(-50%);
  background-color: gray;
}

.title::before{
    content:'_';
    color: aqua;
    background-color: aqua;
}

:deep(.el-form-item){
    padding-bottom: 10px;
    margin-top: 30px;
}

.chart {
  width: 100%;
  height: 100%; /* 让图表填满容器的高度 */
  display: flex;
  justify-content: center; /* 横向居中 */
  align-items: center; /* 纵向居中 */
}

.form-item-container {
  display: flex;
  align-items: center;
  flex-grow: 1; /* 使 form-item-container 能够填满可用空间 */
  gap: 10px;
}

.input-container {
  flex: 1; /* 让 input-container 尽可能占据更多空间 */
  min-width: 0; /* 解决 flex 收缩问题 */
}

.icon-container {
  text-align: center;
  padding: 20px;
}
.dataFont{
  display: inline-block;
  font-weight: bolder;
  font-size: larger;
  color: black;
}
.detectionWrapper {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列，每列占一半宽度 */
  grid-template-rows: 1fr 1fr;   /* 两行，每行占一半高度 */
  height: calc(100% - 40px);
  gap: 10px; /* 间距 */
}
.quan{
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 3px solid rgb(246, 247, 248);
  box-shadow: 0 0 0 3px #1FCCEF;
  left:50%;
  transform: translateX(-50%);
}
.detectionText{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  color: black;
  text-align: center;
  font-size: 16px;
  font-weight: bolder;
  z-index: 10;
  font-size: 26px;
  font-family: ui-monospace;
}
.detectionTitle{
  font-weight: bolder;

}
.detectionValue{
  font-weight: bolder;

}
.shui{
  position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background-color: #1FCCEF;
}
.shui::after{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 150%;
  height: 150%;   
  border-radius: 40%;
  background-color: rgb(240, 228, 228);
  animation: shi 5s linear infinite;
  
}
@keyframes shi{
  0%{
      transform: translate(-50%,-65%) rotate(0deg);
      
  }
  100%{
      transform: translate(-50%,-65%) rotate(360deg); 
    
  }
}
.shui::before{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 150%;
  height: 150%;   
  border-radius: 42%;
  background-color: rgb(240, 228, 228,0.2);
  animation: xu 7s linear infinite;
  
}
@keyframes xu{
  0%{
      transform: translate(-50%,-60%) rotate(0deg);
      
  }
  100%{
      transform: translate(-50%,-60%) rotate(360deg); 
    
  }
}
</style>